import React from 'react';
import styles from './style.less';
import { history, useLocation } from 'umi';

interface data {
  accomplish_time: string;
  book_author: string;
  book_degree: string;
  book_description: string;
  book_id: string;
  book_image: string;
  book_name: string;
  book_price: number;
  book_publisher: string;
  book_status: string;
  book_type: string;
  buyer_id: string;
  post_time: string;
  seller_id: string;
  trade_time: string;
}

function BookItem(props: { source: data }) {
  const location = useLocation();
  const temp = location.pathname.match('/[a-z]+/(.*)');
  const userid = temp ? temp[1] : null;

  let base64 = '';
  let showimg = <img className={styles.bookimg} src="" alt="无图片" />;
  if (props.source.book_image != '') {
    base64 = JSON.parse(props.source.book_image).book_image;
    showimg = <img className={styles.bookimg} src={base64} alt="无图片" />;
  }

  function gotoDetail() {
    history.push({
      pathname: `/detail/${props.source.book_id}`,
      query: {
        user_id: userid,
      },
    });
  }

  return (
    <div className={styles.main}>
      <div onClick={gotoDetail}>{showimg}</div>
      <div>
        <div>
          <h4 className={styles.bookname}>{props.source.book_name}</h4>
          <div className={styles.descriptionblock}>
            <p className={styles.description}>
              {props.source.book_description}
            </p>
          </div>
          <div className={styles.rowblock}>
            <h4 className={styles.price}>￥{props.source.book_price}</h4>
            <h4 className={styles.degree}>{props.source.book_degree}</h4>
          </div>
        </div>
      </div>
    </div>
  );
}

export default BookItem;
